<template>
  <div>
    <vue-particles color="#83b8ff" :particleOpacity="0.7" :particlesNumber="60" shapeType="circle"
                   :particleSize="4" linesColor="#3b91ff" :linesWidth="1" :lineLinked="true" :lineOpacity="0.4"
                   :linesDistance="150" :moveSpeed="2" :hoverEffect="true" hoverMode="grab" :clickEffect="true"
                   clickMode="push" style="position:fixed;top: 0;left: 0;width: 100%;height: 100%;">
    </vue-particles>
    <a-card hoverable
            style="text-align:center; position: fixed; width: 400px;top: 20vh;left: 0;right: 0;margin: 0 auto;">
      <h1 style="color: #3b91ff">电脑爱好者协会<br>竞赛系统</h1>
      <a-tabs v-model="currentTab">
        <a-tab-pane key="login" force-render>
          <span slot="tab">
            <a-icon type="fire" />
            登录
          </span>
          <a-form-model ref="ruleForm" :model="dataForm">
            <a-form-model-item has-feedback :wrapper-col="{md:{span: 18, offset: 3}, sm:{span: 24}}" prop="num">
              <a-input v-model="dataForm.num" placeholder="学号/工号">
                <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)"/>
              </a-input>
            </a-form-model-item>
            <a-form-model-item has-feedback :wrapper-col="{md:{span: 18, offset: 3}, sm:{span: 24}}" prop="pass">
              <a-input type="password" v-model="dataForm.pwd" placeholder="密码">
                <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)"/>
              </a-input>
            </a-form-model-item>
            <a-form-model-item has-feedback :wrapper-col="{md:{span: 18, offset: 3}, sm:{span: 24}}" prop="cla">
              <a-input v-model="dataForm.code" placeholder="验证码">
                <a-icon slot="prefix" type="bulb" style="color:rgba(0,0,0,.25)"/>
                <a-tooltip slot="suffix" title="点击更换">
                  <img :src="codeUrl" @click="changeCode"/>
                </a-tooltip>
              </a-input>
            </a-form-model-item>
          </a-form-model>
          <a-button type="primary" @click="login" :loading="loading" :disabled="!enableSubmit">
            登录
          </a-button>
        </a-tab-pane>
        <a-tab-pane key="register" force-render>
          <span slot="tab">
            <a-icon type="api"/>
            注册
          </span>
          <a-form-model ref="ruleForm" :model="dataRegisterForm">
            <a-form-model-item has-feedback :wrapper-col="{md:{span: 18, offset: 3}, sm:{span: 24}}" prop="name">
              <a-input v-model="dataRegisterForm.name" placeholder="姓名">
                <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)"/>
              </a-input>
            </a-form-model-item>
            <a-form-model-item has-feedback :wrapper-col="{md:{span: 18, offset: 3}, sm:{span: 24}}" prop="num">
              <a-input v-model="dataRegisterForm.num" placeholder="学号(12位)">
                <a-icon slot="prefix" type="idcard" style="color:rgba(0,0,0,.25)"/>
              </a-input>
            </a-form-model-item>
            <a-form-model-item has-feedback :wrapper-col="{md:{span: 18, offset: 3}, sm:{span: 24}}" prop="cla">
              <a-input v-model="dataRegisterForm.cla" placeholder="班级">
                <a-icon slot="prefix" type="bank" style="color:rgba(0,0,0,.25)"/>
              </a-input>
            </a-form-model-item>
            <a-form-model-item has-feedback :wrapper-col="{md:{span: 18, offset: 3}, sm:{span: 24}}" prop="cla">
              <a-input v-model="dataRegisterForm.code" placeholder="验证码">
                <a-icon slot="prefix" type="bulb" style="color:rgba(0,0,0,.25)"/>
                <a-tooltip slot="suffix" title="点击更换">
                  <img :src="codeUrl" @click="changeCode"/>
                </a-tooltip>
              </a-input>
            </a-form-model-item>
          </a-form-model>
          <a-button type="primary" @click="register" :loading="loadingRegister" :disabled="!enableRegister">
            注册
          </a-button>
        </a-tab-pane>
      </a-tabs>


    </a-card>
    <div style="text-align: center;position: fixed;bottom: 3em;left: 0;right: 0;">
      提示: 初始密码为学号后6位<br>
      忘记密码请联系管理员，qq群：735676250
    </div>
  </div>
</template>

<script>
import global from "@/components/global";
import md5 from "js-md5"

export default {
  name: "login",
  data() {
    return {
      currentTab: 'login',
      loading: false,
      dataForm: {
        num: '',
        pwd: '',
        code: ''
      },
      loadingRegister: false,
      dataRegisterForm:{
        name: '',
        num: '',
        cla: '',
        code: ''
      },
      codeUrl: 'exam/api/Login/Captcha'
    }
  },
  methods: {
    register(){
      let that = this
      that.loadingRegister = true
      global.http(this, 'api/Login/Register', {
        data: {
          name: that.dataRegisterForm.name,
          number: that.dataRegisterForm.num,
          class: that.dataRegisterForm.cla,
          code: that.dataRegisterForm.code
        },
        successText: '注册成功',
        failText: '注册失败',
        success(){
          that.dataForm.num = that.dataRegisterForm.num
          that.dataRegisterForm = {
            name: '',
            num: '',
            cla: '',
            code: ''
          }
          that.currentTab = 'login'
          that.changeCode()
        },
        complete() {
          that.loadingRegister = false
        },
      })
    },
    login() {
      let that = this
      that.loading = true
      global.http(this, 'api/Login/Login', {
        data: {
          number: that.dataForm.num,
          password: md5(that.dataForm.pwd),
          code: that.dataForm.code
        },
        successText: '登录成功',
        failText: '登录失败',
        success() {
          window.location = '/home'
        },
        complete() {
          that.loading = false
        }
      })
    },
    changeCode(){
      this.codeUrl = `exam/api/Login/Captcha?t=${new Date().getTime()}`
    }
  },
  computed: {
    enableSubmit() {
      return global.strLenLimit(this.dataForm.num, 12, 12) && global.strLenLimit(this.dataForm.pwd, 20, 6) && /^\w{4}$/.test(this.dataForm.code)
    },
    enableRegister(){
      return global.strLenLimit(this.dataRegisterForm.name, 10) && /^\d{12}$/.test(this.dataRegisterForm.num) && /^[^\w\s]{2,5}\d{2}-\d{1,2}$/.test(this.dataRegisterForm.cla) && /^\w{4}$/.test(this.dataRegisterForm.code)
    }
  }
}
</script>

<style>

</style>